<template>
  <div class="page-content">
    <HyTable
      :tableData="tableList"
      v-bind="props.tableConfig"
      :pageCount="pageCount"
      v-model:pageInfo="pageInfo"
      @update:pageInfo="changPageInfo"
    >
      <!-- header -->
      <template #header>
        <h2>{{ tableConfig.title }}</h2>
        <el-button
          type="success"
          :icon="Plus"
          v-if="isCreate"
          @click="addHandleClick"
          >{{ tableConfig.btn }}</el-button
        >
      </template>

      <template #createAt="{ row }">
        <span>{{ $filter.formatTime(row.createAt) }}</span>
      </template>
      <template #updateAt="{ row }">
        <span>{{ $filter.formatTime(row.updateAt) }}</span>
      </template>

      <!-- 动态生成插槽 -->
      <template
        v-for="item in otherPropsSlot"
        :key="item.label"
        #[item.slotName]="{ row }"
      >
        <slot :name="item.slotName" :row="row"> </slot>
      </template>

      <template #handle="{ row }">
        <el-button
          :icon="Edit"
          link
          type="primary"
          v-if="isUpdate"
          @click="editHandleClick(row)"
        >
          修改</el-button
        >
        <el-button
          :icon="Delete"
          link
          type="primary"
          v-if="isDelete"
          @click="handleDeleteClick(row.id)"
        >
          删除
        </el-button>
      </template>
    </HyTable>

    <HyDialog ref="hyDialogRef" @handleConfirmClick="handleConfirmClick">
      <template #content>
        <span>是删除该条数据？</span>
      </template>
    </HyDialog>
  </div>
</template>

<script setup lang="ts">
import HyTable from '@/base-ui/HyTable/hy-table.vue';
import HyDialog from '@/base-ui/HyDialog/hy-dialog.vue';
import type { ITableConfig } from '@/base-ui/HyTable/types';
import { Edit, Delete, Plus } from '@element-plus/icons-vue';
import { useStore } from '@/store';
import { computed, ref, watch } from 'vue';
import { usePermission } from '@/hooks/usePermission';
import { useRoute } from 'vue-router';
import type { IPageInfo } from './types';
const props = defineProps({
  tableConfig: { type: Object, required: true },
  pageName: {
    type: String,
    required: true
  }
});
const emits = defineEmits(['addHandleClick', 'editHandleClick']);
const route = useRoute();
// 4 判断当前用户的按钮权限
const moduleName = route.path.split('/')[2];
const isCreate = usePermission(moduleName, props.pageName, 'create');
const isDelete = usePermission(moduleName, props.pageName, 'delete');
const isUpdate = usePermission(moduleName, props.pageName, 'update');
const isQuery = usePermission(moduleName, props.pageName, 'query');

// 1 发请求
const store = useStore();
const pageInfo = ref({ currentPage: 1, pageSize: 10 });
const getPageData = (pageInfo: IPageInfo) => {
  if (!isQuery) return;
  const formData = store.state.system.searchInfo;
  store.dispatch('system/getTableList', {
    pageName: props.pageName,
    queryInfo: {
      offset: (pageInfo.currentPage - 1) * pageInfo.pageSize,
      size: pageInfo.pageSize,
      ...formData
    }
  });
};
getPageData({ ...pageInfo.value });
//从vuex中获取数据
// const tableList = computed(
//   () => (store.state.system as any)[`${props.pageName}TableData`].list
// );
// 2 从vuex拿数据
const tableList = computed(() => {
  return store.getters['system/pageContentList'](props.pageName);
});
const pageCount = computed(() => {
  return store.getters['system/pageContentCount'](props.pageName);
});
// watch(pageInfo, (newVal) => {
//   getPageData(newVal);
// });
const changPageInfo = (pageInfo: IPageInfo) => {
  getPageData(pageInfo);
};

// 3动态生成插槽（给需要特定格式的列）
const otherPropsSlot = props.tableConfig.tableItems.filter(
  (item: ITableConfig) => {
    // createAt updateAt handle 排除不需要动态生成插槽的item
    if (
      !item.slotName ||
      item.slotName === 'createAt' ||
      item.slotName === 'updateAt' ||
      item.slotName === 'handle'
    )
      return false;
    return true;
  }
);

// 5 删除、新增、编辑
const hyDialogRef = ref<InstanceType<typeof HyDialog>>();
const handleConfirmClick = ref();
const handleDeleteClick = (id: number) => {
  hyDialogRef.value!.dialogVisible = true;
  // handleConfirmClick(id);
  handleConfirmClick.value = () => {
    store.dispatch('system/deletePageData', {
      pageName: props.pageName,
      id: id
    });
  };
};

const addHandleClick = () => {
  emits('addHandleClick');
};
const editHandleClick = (data: any) => {
  emits('editHandleClick', data);
};
defineExpose({
  getPageData,
  pageInfo
});
</script>

<style scoped></style>
